<template>
  <div class="now">
    <router-link
      tag="div"
      class="now-no"
      v-for="(item,index) in arr"
      :key="index"
      :to="{name:'detail',params:{id:item.filmId},query:{'R':'www'}}"
    >
      <div class="lft">
        <img :src="item.poster" alt />
      </div>
      <div>
        <div>
          <p class="biaoti">{{item.name}}</p>
          <span class="two">{{item.item.name}}</span>
        </div>

        <p>
          观众评分
          <span class="fen">100</span>
        </p>
        <p class="wenb">
          演员：
          {{item.actors[1].name+','+item.actors[2].name+','+item.actors[3].name+','+item.actors[4].name}}
        </p>
        <p>{{item.nation}}</p>
        <!-- <p>主演：{{item.}}</p> -->
      </div>
    </router-link>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      arr: []
    };
  },
  mounted() {
    axios({
      //请求接口
      url: "/data/film1",
      method: "get" //获取的方法
    }).then(ok => {
      // console.log(ok.data.films,ok.data.films.actors);
      this.arr = ok.data.films;
    });
  }
};
</script>
<style scoped>
.now {
  background-color: #dddddd;
  width: 100%;
  /* height: 1.4rem; */
  overflow: hidden;
  font-size: 0.16rem;
}
.now-no {
  width: 100%;
  padding: 0.15rem 0.15rem 0.15rem 0.25rem;
}
.now div {
  float: left;
}
.now img {
  display: block;
  width: 0.66rem;
  height: 0.9rem;
}
.biaoti {
  font-size: 0.18rem;
  font-weight: bolder;
  white-space: nowrap;
  overflow: hidden;
  width: 1.3rem;
  text-overflow: ellipsis;
}
.wenb {
  white-space: nowrap;
  overflow: hidden;
  width: 2.2rem;
  text-overflow: ellipsis;
}
.two {
  line-height: 0.14rem;
  border-radius: 25%;
  font-size: 0.1rem;
  color: honeydew;
  background-color: grey;
  font-weight: normal;
}
.lft {
  margin-right: 0.1rem;
}
.fen {
  color: darkgoldenrod;
}
</style>